// pages/c/c.js
const uCharts = require('../../utils/u-charts')
	var _self;
	var canvaGauge=null;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    cWidth:'',
    cHeight:'',
    pixelRatio:1,
    textarea:'',
    gaugeWidth:15,
    type:'default'
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    _self = this;
    _self.pixelRatio=1
    _self.gaugeWidth=15
    _self.type='default'
    _self.cWidth = wx.getSystemInfoSync().windowWidth;
    _self.cHeight = 500 / 750 * wx.getSystemInfoSync().windowWidth;
    _self.getServerData();
    _self.progress = 0;
    _self._img = '/utils/b.png';
  },
  // 初始数据
  getServerData(){
        let Gauge={
          categories:[],
          series:[{color: "#61be5a",data: parseFloat(4800/5000),name: "今日步数", total:5000, nSetp:4800,
          _img:{//配置进度条上的图片及大小，
            img:'/utils/b.png',
            w:8,
            h:8,
            offX:10,
            offY:-4
          }
        }]
        };
        _self.showGauge("canvasGauge",Gauge);
  },
  // 配置仪表盘的参数
  showGauge(canvasId,chartData){
    let ctx = wx.createCanvasContext(canvasId, _self)
    canvaGauge = new uCharts({
      // $this:_self,
      // canvasId: canvasId,
      type: 'gauge',
      context:ctx,
      fontSize:11,
      //这个是配置中间圆圈中的底部进度条的百分比的数据的
      title: {
        name: `已完成${Math.round(chartData.series[0].data*100)}%`,
        color: '#000000',
        fontSize: 20*_self.pixelRatio,
        offsetY:50*_self.pixelRatio,//新增参数，自定义调整Y轴文案距离
      },
      //配置中间圆圈中的上部的字体及颜色等
      subtitle: {
        name: chartData.series[0].name,
        color: '#000',
        fontSize: 15*_self.pixelRatio,
        offsetY:-50*_self.pixelRatio,//新增参数，自定义调整Y轴文案距离
        text1:[
          {//第一个是配置当前的步数
            name: chartData.series[0].nSetp,
            color: '#000',
            fontSize: 24*_self.pixelRatio,
            offsetY:1*_self.pixelRatio,//新增参数，自定义调整Y轴文案距离
          },
          {//第二个是配置总的步数
            name: chartData.series[0].total,
            color: '#000',
            fontSize: 10*_self.pixelRatio,
            offsetX: -4*_self.pixelRatio,
            offsetY:30*_self.pixelRatio,//新增参数，自定义调整Y轴文案距离
            img:'/utils/b.png' //这个是底部已完成多少步的图片
          }
        ]
      },
      extra: {
        gauge:{
          type:'progress',//源码4672-----2060
          width: _self.gaugeWidth*_self.pixelRatio,//仪表盘背景的宽度
          startAngle:0.75,
          endAngle:0.25,
          startNumber:0,
          endNumber:100,
        }
      },
      background:'#FFFFFF',
      pixelRatio:_self.pixelRatio,
      categories: chartData.categories,
      series: chartData.series,
      animation: true,
      width: _self.cWidth*_self.pixelRatio,
      height: _self.cHeight*_self.pixelRatio,
      dataLabel: true,
    });
  },
  // 使用递归进行动态的渲染进度条
drawProgress(progress) {
  const ctx = wx.createCanvasContext('step',_self)
    // 清空画布(每次清空画布重新绘制，才能更新)
    ctx.clearRect(0,0, _self.cWidth , _self.cHeight);
    // 首先绘制背景
    _self.drawBg(ctx);
    // 开始绘制绿色线段
    ctx.beginPath();
    ctx.lineWidth = 12;// 设置线宽
    ctx.strokeStyle = 'green';// 画笔颜色
    ctx.moveTo(0,50);
    ctx.lineTo(_self.progress,50);
    ctx.drawImage(_self._img,_self.progress,50,10,10);
    ctx.setLineCap('round');
    ctx.stroke();
    ctx.closePath();
    // 开始绘制变动的数字
    ctx.beginPath();
    ctx.lineWidth = 1;
    ctx.fillStyle = '#4a4a4a';
    ctx.font = '14px serif';
    ctx.fillText(parseInt(_self.progress/3)+'%',300,50);
    
    ctx.fill();
    ctx.closePath();
    ctx.draw()
    _self.progress++;
    if(_self.progress <= 300){
      // console.log('---------1-----------');
        // 通过setTimeout进行递归调用更新
        setTimeout(()=>{
          _self.drawProgress();
        },17)
    }
    // console.log(_self.progress);
    // ctx.draw()
},
//绘制灰色的进度条
 drawBg(ctx){
    ctx.beginPath();
    ctx.setLineWidth(12);
    ctx.setStrokeStyle('#ccc');
    ctx.moveTo(0,50)
    ctx.lineTo(300,50);
    ctx.stroke();
    ctx.closePath(); 
   
},
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.drawProgress()
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})